<template>
  <div class="women-panel">
    <div class="panel-container">
      <!-- 左侧导航 -->
      <div class="panel-nav">
        <a-collapse v-if="isMobile" v-model:activeKey="activeKeys">
          <a-collapse-panel v-for="(item, index) in children" :key="index" :header="item.name">
            <div class="nav-items">
              <div class="nav-item">
                <a
                  :href="`/classify/${item.url}-${item.id}.html`"
                  :title="item.name"
                  style="color: #000; font-weight: bold;"
                  target="_self">{{ item.name }}
                </a>
              </div>
              <!-- 移动端三级分类 -->
              <div
                class="nav-item nav-item-child"
                v-for="(child, childIndex) in item.children"
                :key="`${index}-${childIndex}`"
                v-if="item.children && item.children.length"
              >
                <a
                  :href="`/classify/${child.url}-${child.id}.html`"
                  :title="child.name"
                  style="color: #000;"
                  target="_self">{{ child.name }}
                </a>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
        <div class="nav-section multi-column" v-else>
          <!-- <div class="nav-title">New In</div>
          <div class="nav-title">Clothing</div> -->
          <div class="category-group" v-for="(item, index) in children" :key="index">
            <div class="nav-item nav-item-parent">
              <a
                :href="`/classify/${item.url}-${item.id}.html`"
                :title="item.name"
                style="color: #000; font-weight: bold;"
                target="_self">{{ item.name }}
              </a>
            </div>
            <!-- 三级分类 -->
            <div class="nav-item nav-item-child" v-for="(child, childIndex) in item.children" :key="`${index}-${childIndex}`" v-if="item.children && item.children.length">
              <a
                :href="`/classify/${child.url}-${child.id}.html`"
                :title="child.name"
                style="color: #000;"
                target="_self">{{ child.name }}
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间部分 -->
      <!-- <div class="panel-middle">
        <div class="middle-section" v-for="(section, index) in middleSections" :key="index">
          <div class="section-title">{{ section.title }}</div>
          <div class="section-item" v-for="item in section.items" :key="item">{{ item }}</div>
        </div>
      </div> -->

      <!-- 右侧部分 -->
      <!-- <div class="panel-right">
        <div class="right-section" v-for="(section, index) in rightSections" :key="index">
          <div class="section-title">{{ section.title }}</div>
          <div class="section-item" v-for="item in section.items" :key="item">{{ item }}</div>
        </div>
      </div> -->

      <!-- 推荐部分 -->
      <div class="panel-featured">
<!--        <div class="featured-title">Inspire Me / Lookbook</div>-->
        <a-row :gutter="16">
          <a-col :span="6" v-for="(item, index) in children"  :key="index" v-show="index < 3">
            <div class="featured-item">
              <div class="featured-image">
                <a :href="`/classify/${item.url}-${item.id}.html`"
                   :title="item.name"
                   target="_self">
                  <a-image class="image" :preview="false" :src="item.icon" :alt="item.name" />
                </a>
              </div>
              <div class="featured-name">
                <a
                    :href="`/classify/${item.url}-${item.id}.html`"
                    :title="item.name"
                    style="color: #000;"
                    target="_self">{{ item.name }}
                </a>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { Collapse, Row, Col } from 'ant-design-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
interface SectionItem {
  name: string;
  items?: Array<{
    name: string;
  }>;
  id?: string;
  url?: string;
  icon?: string;
  children?: SectionItem[];
}

const props = defineProps<{
  children: SectionItem[];
}>();
const { Panel: CollapsePanel } = Collapse;

// 折叠面板激活的 key
const activeKeys = ref<number[]>([]);

// 移动端标志
const isMobile = ref(false);

// 检查窗口大小并设置移动端标志
const checkWindowSize = () => {
  isMobile.value = window.innerWidth < 1040;
};

onMounted(() => {
  checkWindowSize();
  window.addEventListener('resize', checkWindowSize);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkWindowSize);
});

// 确保组件有默认导出
defineExpose({
  // 可以暴露一些方法或属性给父组件
});
</script>

<style lang="scss" scoped>
.women-panel {
  width: 100%;
}

.panel-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  justify-content: space-between;
}

.panel-nav {
  flex: 1.5;
  padding: 0 20px;
  max-width: 400px;
}

.panel-featured {
  flex: 2.5;
  padding: 0 20px;
  border-left: 1px solid #ddd;
}

.nav-section, .middle-section, .right-section {
  margin-bottom: 20px;
}

.multi-column {
  max-height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  gap: 0 15px;
}

.nav-title, .section-title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 14px;
}

.category-group {
  margin-bottom: 15px;
  width: 100%;
  max-width: 180px;
  break-inside: avoid;
}

.nav-item, .section-item {
  margin-bottom: 8px;
  font-size: 13px;
  color: #333;
  cursor: pointer;

  &:hover {
    color: #ff0000;
  }
}

.nav-item-parent {
  margin-bottom: 5px;

  a {
    font-size: 14px;
    white-space: normal;
    word-break: break-word;
  }
}

.nav-item-child {
  padding-left: 15px;
  margin-bottom: 5px;

  a {
    font-size: 12px;
    white-space: normal;
    word-break: break-word;
  }
}

.featured-title {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 16px;
  text-align: left;
}

.featured-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.featured-item {
  text-align: center;

  .featured-image {
    aspect-ratio: 3/4;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    overflow: hidden;

    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 0.3s ease;

      &:hover {
        transform: scale(1.05);
      }
    }
  }

  .featured-name {
    font-size: 14px;
    margin-top: 10px;

    a {
      color: #262626;
      text-decoration: none;

      &:hover {
        color: #ff0000;
        text-decoration: underline;
      }
    }
  }
}

@media (max-width: 1040px) {
  .panel-container {
    flex-direction: column;
  }

  .panel-nav {
    max-width: 100%;
  }

  .panel-featured {
    margin-top: 20px;
    border-left: none;
  }

  .featured-items {
    grid-template-columns: repeat(2, 1fr);
  }

  .multi-column {
    max-height: none;
    display: block;
    overflow: visible;
  }

  .category-group {
    max-width: none;
    width: 100%;
    margin-right: 0;
  }
}
</style>
